import React from 'react';
import { Outlet } from 'react-router-dom'
import { useSelector } from 'react-redux'
import { Layout,ConfigProvider, theme   } from 'antd';
import './main.css'
import LayoutAside from "../../components/layout/LayoutAside";
import LayoutHeader from "../../components/layout/LayoutHeader";
import { RouterAuth } from "../../router/routerAuth";
const { Content } = Layout;

const { darkAlgorithm, defaultAlgorithm,  } = theme
const Main = () => {
    const storeTheme =  useSelector(state => state.app.theme)
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    return (
        <RouterAuth>
            <ConfigProvider theme={ {  algorithm: storeTheme === 'dark' ? darkAlgorithm : defaultAlgorithm } }>
                <Layout className="main-layout">
                    <LayoutAside />
                    <Layout>
                        <LayoutHeader />
                        <Content
                            className="content"
                            style={{
                                margin: '24px 16px',
                                padding: 24,
                                minHeight: 280,
                                background: colorBgContainer,
                                borderRadius: borderRadiusLG,
                            }}
                        >
                            <Outlet />
                        </Content>
                    </Layout>
                </Layout>
            </ConfigProvider>
        </RouterAuth>
    );
};
export default Main;
